<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #background-pop{
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        #div-pop{
            background:#ffffff;
            width:70%;
            z-index: 1;
            margin: 12% auto;
            overflow: auto;
        }
        .div-top{
            width: 100%;
            height: auto;
            background-color: #28a3e7;
            color: #ffffff;
        }
        .div-top div{
            padding: 3px 5px 5px 8px;
        }
        span{
            color: white;
            margin-bottom: 10px ;
            margin-left: 20px ;
            cursor: pointer;
            float: right;
        }
        .div-content{
            width: auto;
            height: auto;
            overflow: auto;
        }

        .btn-pop{
            appearance: auto;
            -webkit-writing-mode: horizontal-tb !important;

            text-rendering: auto;
            background-color: #efefef;
            letter-spacing: normal;
            word-spacing: normal;
            line-height: normal;
            text-transform: none;
            text-indent: 0px;
            text-shadow: none;
            display: inline-block;
            text-align: center;
            align-items: flex-start;
            cursor: default;
            box-sizing: border-box;
            background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
            margin: 0em;
            padding: 1px 6px;
            border-width: 2px;
            border-style: outset;
            border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
            border-image: initial;
        }
    </style>

</head>
<body>
<form action="yanhuoshanchu.do" id="form001" onsubmit="return check()">
<table border="1" style="border: skyblue">

    <tr>
        <td style="border: 0"></td>
        <td style="border: 0">货主:</td>

        <td colspan="2" style="border: 0" th:text="${choosename}"></td>
        <td style="border: 0">入货单号:</td>
        <td colspan="2" style="border: 0" th:text="${choosebillId}"></td>
    </tr>

    <tr>
        <td style="width: 50px"></td>
        <td>货物名称</td>

        <td>规格</td>
        <td>入库（件）</td>
        <td>入库重量</td>
        <td>托盘号</td>
        <td>验货员</td>
    </tr>

    <tr th:each="everyBillDetil:${wmsTBillDetails}">
        <td style="width: 50px"><input type="checkbox" name="choosebillDetilId" th:value="${everyBillDetil.detailsId}" id="eveChosedetailsId"></td>
        <td th:text="${everyBillDetil.detailsGoodsName}"></td>
        <td th:text="${everyBillDetil.detailsGoodsSpec}"></td>
        <td th:text="${everyBillDetil.detailsGoodsNum}"></td>
        <td th:text="${everyBillDetil.detailsGoodsSpec * everyBillDetil.detailsGoodsNum}"></td>
        <td th:text="${everyBillDetil.trayId}"></td>
        <td th:text="${everyBillDetil.detailsAffirmant}"></td>

    </tr>


    <br>

    <tr>
        <td colspan="6"><input type="button" value="全选" onclick="setAll()"><input type="button" value="全不选" onclick="setNo()"></td>
        <td>
            <div class="btn-pop" >添加</div>
            <input type="submit" value="删除"/>
<!--            <input type="submit" value="删除"  onclick="form.action='yanhuoshanchu.do';form.submit();"/>-->
            <button><a href="yanhuojieshu.do">验货结束</a></button>
        </td>
    </tr>
</table>
</form>



<br>
<br>
<br>



<div id="background-pop">
    <div id="div-pop">
        <div class="div-top">
            <span id="close-button">×</span>
            <div>验货装盘</div>
        </div>
        <div class="div-content">

            <form>
                <table border="1" style="border: skyblue" >

                    <tr>
                        <td>货物名称</td>
                        <td  class="icon"><input type="text" required="required" id=""></td>
                        <td>托盘编号</td>

                        <td colspan="3"  class="icon"><input type="text" required="required" id=""></td>
                    </tr>

                    <tr>
                        <td>规格（公斤/件）</td>
                        <td  class="icon"><input type="text" required="required" id=""></td>

                        <td>入库（件）</td>
                        <td  class="icon"><input type="text" required="required" id=""></td>
                        <td>总重量（公斤）</td>
                        <td><input type="text" required="required" id=""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="5">
                            <button>确认</button>
                            <button id="close-button2">取消</button>
                        </td>
                    </tr>
                    <br>
                </table>
            </form>
        </div>

    </div>
</div>


</body>
<script type="text/javascript">
    function check() {
        var loves = document.getElementsByName("choosebillDetilId");
        var checkNum = 0;
        for (var i = 0; i < loves.length; i++) {
            if(loves[i].checked){
                checkNum++;
               return  true;
            }
        }
        if (checkNum == 0){
            alert("至少选择一个！");
            return false;
        }
    }
    function setAll() {   //全选点击事件
        var loves = document.getElementsByName("choosebillDetilId");
        for (var i = 0; i < loves.length; i++) {
            loves[i].checked = true;
        }
    }

    function setNo() {   //全选点击事件
        var loves = document.getElementsByName("choosebillDetilId");
        for (var i = 0; i < loves.length; i++) {
            loves[i].checked = false;
        }
    }
</script>
<script>
    var div = document.getElementById('background-pop');
    console.log(div)
    var close = document.getElementById('close-button');
    var close2 = document.getElementById('close-button2');

    var btn = document.querySelector(".btn-pop");
    console.log(btn)
    btn.onclick = function (){
        div.style.display = 'block';
    }
    function show(){
        div.style.display = "block";
    }
    close.onclick = function close() {
        div.style.display = "none";
    }
    close2.onclick = function close() {
        div.style.display = "none";
    }
    window.onclick = function close(e) {
        if (e.target == div) {
            div.style.display = "none";
        }
    }
</script>

</html>